<template>
    <div class="add-invitation-page">
        <el-card shadow="never">
            <el-form label-position="right" label-suffix=":" label-width="auto">
                <el-form-item label="海报图" prop="poster">
                    <file-upload :type="1" :multiple="false" v-model="image">
                        <div class="avatar-uploader">
                            <img v-if="image" :src="image" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                    </file-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onClickConfirm()">保 存</el-button>
                    <el-button @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import FileUpload from '@/components/base/FileUpload';

export default {
    components: {
        FileUpload,
    },
    data() {
        return {
            image: '',
        };
    },
    methods: {
        /**
         * 提交表单
         */
        onClickConfirm() {
            if (this.image === '') return $ele.$message.error('海报图不能为空');
            const url = this.$route.query.id ? `poster/${this.$route.query.id}` : 'poster';
            API[this.$route.query.id ? 'put' : 'post'](url, {
                image: this.image,
            }).then(() => {
                $ele.$message.success(this.$route.query.id ? '修改成功' : '保存成功');
                this.$router.go(-1);
            });
        },
        /**
         * 查看海报详情
         */
        fetchData() {
            API.get(`poster/${this.$route.query.id}`).then(res => {
                this.image = res.image;
            });
        },
    },
    mounted() {
        if (this.$route.query.id) this.fetchData();
    },
};
</script>

<style lang="scss" scpoed>
.add-invitation-page {
    .avatar-uploader {
        min-width: 150px;
        min-height: 150px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        min-width: 150px;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .avatar {
        min-width: 150px;
        min-height: 150px;
        display: block;
        max-width: 200px;
    }
}
</style>
